<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no viewport-fit=cover" />

		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<link rel="stylesheet" href="../Common/css/lib/materialize.min.css">
		<link rel="stylesheet" href="../Common/css/lib/minirefresh.css" />
		<link rel="stylesheet" href="../Common/css/lib/minirefresh.theme.applet.css" />
		<link rel="stylesheet" href="../Common/css/lib/swiper.css">
		<link rel="stylesheet" href="../Common/css/ufun.css" />
		<link rel="stylesheet" href="../Common/css/table-list.css" />
		<script src="../Common/js/lib/minirefresh.js"></script>
		<script src="../Common/js/lib/minirefresh.theme.applet.js"></script>
		<script src="../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../Common/js/lib/materialize.min.js"></script>
		<script src="../Common/js/lib/swiper.js"> </script>
		<script src="../Common/js/table-list.js"></script>
		<script src="../Common/js/jump.js"></script>
		<script src="../Common/js/jump-to-detail.js"></script>
		<script src="../Common/js/tools.js"></script>
		<style>
			#LecList {
				--card-height: 28;
			}
			
			.lec-cover-img-container {
				position: relative;
				flex: none;
				width: calc(var(--card-height) * 0.8vw);
				height: calc(var(--card-height) * 1vw);
				margin-right: 3vw;
			}

			.lec-cover-img {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 2vw;
				border: 1px solid var(--color-gray-white);
			}

			.lec-price {
				text-align: center;
				position: absolute;
				padding: 0.5vw 0.5vw;
				min-width: 12vw;
				bottom: 1vw;
				right: 1vw;
				font-size: 3.5vw;
				color: var(--color-gray-dark);
				background: var(--color-yellow);
				border-radius: 1vw;
			}
			
			.lec-rows {
				min-height: calc(var(--card-height) * 1vw);
				flex: auto;
			}

			.lec-rows>* {
				display: block;
				max-width: 100%;
			}

			.lec-title {
				font-weight: bold;
				font-size: 4.5vw;
			}

			.lec-lecer {
				--line-height: calc(10vw + 2px);
				height: var(--line-height);
			}

			.lec-lecer .lec-head-img {
				float: left;
				height: 8vw;
				width: 8vw;
				margin: 1vw 2vw 1vw 0;
				border-radius: 100%;
				border: 1px solid var(--color-gray-white);
			}

			.lec-lecer .lec-nick {
				font-size: 4vw;
				height: var(--line-height);
				line-height: var(--line-height);
			}

			.lec-tags {
				text-align: left;
				overflow: hidden;
				height: 7vw;
				font-size: 3.5vw;
				white-space: pre-wrap; /* 保证折行隐藏, 不超量显示 */
			}

			.lec-tags>li {
				display: inline-block;
				max-width: max-content;
				margin-left: 0.5vw;
				border: 1px solid var(--color-gray-white);
				border-radius: 2vw;
				padding: 0.2vw 0.8vw;
				margin: 0 0.2vw;
				margin-bottom: 999vw; /*绝对不让第二行显示出来*/
				color: var(--color-gray-medium);
				text-align: center;
				white-space: pre-wrap; /* 换行(省略号)优化 */
				word-wrap: break-word;
				word-break: break-all;
			}
			

			.lec-tags>li::before {
				/*content: " | "; /* 纯文本模式下, 前面加分隔符 */
			}
			

			.lec-tags>li:first-child::before {
				/*content: ""; /* 第一个不需要| */
			}

			.lec-footer>* {
				float: left;
				padding-right: 1vw;
				padding-left: 0.5vw;
				
				line-height: 4vw;
				font-size: 3.5vw;
				color: var(--color-gray-medium);
			}
		</style>
	</head>

	<body>
		<!-- 卡片模板 -->
		<div class="temp" id="LecTemplate">
			<li class="list-card" lecId="0">
				<div class="lec-cover-img-container">
					<img class="lec-cover-img" src="">
					<div class="lec-price">免费</div>
				</div>
				<div class="lec-rows">
					<div class="lec-title">题目</div>
					<div class="lec-lecer">
						<img class="lec-head-img" />
						<div class="lec-nick">用户名</div>
					</div>
					<ul class="lec-tags truncate"></ul>
					<div class="lec-footer">
						<div class="lec-data">233</div>
						<div>浏览 · </div>
						<div class="lec-data">332</div>
						<div>推荐</div>
					</div>
				</div>
			</li>
		</div>
		<header>

			<div style="width: 100%;">
				<div id="NavBar">
					<img class="circle" src="../Mine/personal-center/img/headimg.png">
					<div id="Search">
						<input id="SearchInput" placeholder="我是搜索框">
						<i class="material-icons">search</i>
					</div>
					<div id="CampusCorner" onclick="JumpToSelectEdu(eduId);">
						<i class="material-icons">school</i>
						<a id="CampusName" id="truncate">山西大学</a>
					</div>
				</div>
				<ul class="tabs row">
					<li class="tab col s3">
						<a onclick="changeListType('hot');">
							<h5>热门</h5>
						</a>
					</li>
					<li class="tab col s3">
						<a onclick="changeListType('dept');">
							<h5>院系</h5>
						</a>
					</li>
					<li class="tab col s3">
						<a onclick="changeListType('campus');">
							<h5>校圈</h5>
						</a>
					</li>
				</ul>
			</div>
		</header>
		<div class="content fixed">
			<!-- 消息列表 -->
			<div id="Minirefresh" class="minirefresh-wrap">
				<div class="minirefresh-scroll">
					<!-- 轮播 -->
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide"><img src="../Common/img/banner1.jpg"></div>
							<div class="swiper-slide"><img src="../Common/img/banner2.jpg"></div>
							<div class="swiper-slide"><img src="../Common/img/banner3.jpg"></div>
							<div class="swiper-slide"><img src="../Common/img/banner4.jpg"></div>
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<!-- 重要的讲座列表在这里!!! -->
					<ul class="list" id="LecList"></ul>
				</div>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		var userHash;
		var current;
		var lastId = 0;
		var isEnd = false;
		var lecLists = ID("LecList");
		var listType;
		var mySwiper;
		var miniRefresh;
		var eduId;
		/* 有大段的逻辑封装在table-list.js里 */
		mySwiper = new Swiper('.swiper-container', {
			loop: true, // 循环模式选项
			autoplay: true,
			pagination: {
				el: '.swiper-pagination',
			},
		});

		document.addEventListener('plusready', () => {
			DoWait();
			GetStatusTop();
			userHash = plus.storage.getItem('userHash');
			current = plus.webview.currentWebview();
			// 轮播图初始化
			let data = {
				userHash: userHash,
			}
			CallAJAX('getCarousel', data, function(res) {
				let list = res.carouselList;
				let html = ''
				for (let i in list) {
					html += '<div class="swiper-slide"><img src=" '+ SERVER_LOC + list[i].imgLoc + '" data-type=' + list[i].entityType +
						'data-id=' + list[i].entityId + '></div>'
				}
				$('.swiper-wrapper').html(html);
			}, function(e) {
				console.log(JSON.stringify(e));
			});
			miniRefresh = MakeMiniRefreshWithSwiper('.swiper-container', '#QuesList');
			refreshPage("hot");
			DoShow(current, 'none', 0);
		});

		function showList(id) {
			var data = {
				"userHash": userHash,
				"lastId": id,
				"listType": listType,
			};
			if (listType != "hot")
				data['eduId'] = eduId;
			InRefresh = true;
			id = id ? id : 0;
			DoWait();
			// AJAX: listLec
			CallAJAX('listLec',
				data,
				function(data) { // success
					DontWait();
					if (data["res"] == "1") {
						isEnd = true;
						miniRefresh.endDownLoading(true);
						miniRefresh.endUpLoading(true);
					} else {
						isEnd = false;
						miniRefresh.endDownLoading();
						miniRefresh.endUpLoading();
					}
					if (id == 0) {
						lecLists.innerHTML = "";
						lastId = 0;
					}

					if (data["res"] == "ok") {
						let lecCnt = lecLists.children.length;
						for (let i in data["lecList"]) {
							addLecCard(data["lecList"][i], lecCnt);
						}
						ID('LecList').style.opacity = 1;
					}
				},
				function() { // error
					DontWait();
					InRefresh = false;
					isEnd = true;
					lecLists.style.display = "none";
					// BadPage.style.display = "block";
					console.log("lection load failed.");
				});
		}

		// 轮播跳转详情
		$('.swiper-slide').click(function() {
			// let data = {
			// 	userHash: userHash,
			// 	entityType: $(this).data('entityType'),
			// 	entityId: $(this).data('entityId')
			// }
			JumpDetail($(this).data('entityType'), $(this).data('entityId'))
			// CallAJAX('JumpToDetail', data, function(res) {
			// 	let type = res.type;
			// 	let id = 1; // 轮播图id
			// 	JumpDetail(type, id)
			// })
		});

		function addLecCard(lec, cnt) {
			if (lastId != 0 && lec["lecId"] >= lastId)
				return;
			let newLec = document.getElementById("LecTemplate").lastElementChild.cloneNode(true);
			newLec.setAttribute("lecid", lec["lecId"].toString());
			newLec.setAttribute("userid", lec["lecLecerId"].toString());
			newLec.onclick = function() {
				JumpToLec(parseInt(newLec.getAttribute("lecid")));
			}
			// newLec.getElementsByClassName("lec-cover-img")[0].src = '';
			newLec.getElementsByClassName("lec-head-img")[0].src = SERVER_LOC + lec["lecLecerHeadImgLoc"];
			newLec.getElementsByClassName("lec-nick")[0].innerText = lec["lecLecerNick"];
			newLec.getElementsByClassName("lec-title")[0].innerText = lec["lecTitle"];
			newLec.getElementsByClassName("lec-data")[0].innerText = lec["lecLookedCnt"];
			newLec.getElementsByClassName("lec-data")[1].innerText = lec["lecLikedCnt"];
			if (lec["lecCoverImg"][0] == '/')
				newLec.getElementsByClassName("lec-cover-img")[0].src = SERVER_LOC + lec["lecCoverImg"];
			else
				newLec.getElementsByClassName("lec-cover-img")[0].src = lec["lecCoverImg"];
			let tags = getTags(lec["lecTags"]);
			let tagsDOM = newLec.getElementsByClassName("lec-tags")[0];
			var tagLength = 0;
			for (let i = 0; i < tags.length; i++) {
				tagsDOM.innerHTML +=
					`<li>${tags[i]}</li>`;
			}
			lecLists.appendChild(newLec);
			lastId = lec["lecId"];
			lecLists.style.display = "block";
			//当讲座为0元时设置免费
			if (lec["lecCharge"] == 0) {
				lec["lecCharge"] = '免费';
				newLec.getElementsByClassName("lec-price")[0].innerText = lec["lecCharge"];
			} else {
				lec["lecCharge"] += '元';
				newLec.getElementsByClassName("lec-price")[0].innerText = lec["lecCharge"];
			}
		}
	</script>
</html>

